<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blogger.css">
    <link rel="stylesheet" href="./css/container.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body onload="getUserInfo()">
    <iframe src="i_nav.html" style="height: 45px; width: 100%;" frameborder="0"></iframe>

    <div class="container">
        <iframe src="i_blogger.html" style="height: 534px; width: 274px;" frameborder="0"></iframe>
        <div class="blogs" style="overflow: auto;">
            <div>
                <h2>个人博客</h2>
                <br>
                <ul id="topicsList"></ul>
            </div>
        </div>

        <script>
            //信息获取
            function getUserInfo() {
                //登录验证
                if (localStorage.getItem('token')) {

                    //个人博客获取
                    const topicsList = document.querySelector('#topicsList')
                    axios('http://47.98.20.202:8000/topics/getTopicList/')
                        .then(res => {
                            const data = res.data.data;
                            console.log("博客:", data)
                            const t_id = new URLSearchParams(window.location.search).get('t_id');
                            const result = data.filter(item => item.t_uid === Number(localStorage.getItem('token')))
                                .sort((a, b) => new Date(b.create_time) - new Date(a.create_time));

                            console.log("result:", result)

                            topicsList.innerHTML = result.map(item =>
                                `<div class="blogContent"">       
                                    <button class="btn-delete" data-id="${item.id}">X</button>              
                                    <a href="content.html?id=${item.id}">
                                        <li>
                                            <img src="${item.t_photo}" alt="" id="t_photo" style="width: 100px;height: 100px; margin:0 0 0 25%;">
                                            <div id="t_title">【标题】${item.t_title}</div>
                                            <div id="t_kind">【分类】${item.t_kind}</div>
                                            <div id="t_introduce">【简介】${item.t_introduce}</div>
                                        </li>  
                                    </a>        
                                </div>`
                            ).join('')
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                }
                else {
                    window.location.href = "login.html";
                }
            }

            //博客删除
            document.addEventListener('DOMContentLoaded', () => {
                topicsList.addEventListener('click', () => {
                    if (event.target.classList.contains('btn-delete')) {
                        const itemId = event.target.getAttribute('data-id');
                        axios({
                            method:'delete',
                            url: "http://47.98.20.202:8000/topics/deleteTopic/",
                            data: {
                                "ids": [
                                itemId
                                ]
                            }
                        }).then(res =>{
                            window.location.reload();
                        })
                    }
                });
            });

        </script>
</body>

</html>